<template>
	<l-page :page.sync="queryParams.pageNum" :page-size.sync="queryParams.pageSize" :total="total" @getList="getList">
		<el-form ref="query" slot="header" :inline="true" :model="queryParams" label-width="90px">
			<!--			<el-form-item label="用户ID：" prop="uuid">-->
			<!--				<el-input v-model.trim="queryParams.uuid" placeholder="请输入用户ID" maxlength="6" clearable show-word-limit />-->
			<!--			</el-form-item>-->
			<!--			<el-form-item label="手机号码:" prop="mobile">-->
			<!--				<el-input v-model.trim="queryParams.mobile" placeholder="请输入手机号码" maxlength="11" clearable show-word-limit />-->
			<!--			</el-form-item>-->
			<!--			<el-form-item label="商家名称:" prop="storeName">-->
			<!--				<el-input v-model.trim="queryParams.storeName" placeholder="请输入商家名称" clearable show-word-limit />-->
			<!--			</el-form-item>-->
			<!--			<el-form-item label="订单编号:" prop="orderGoodsSn">-->
			<!--				<el-input v-model.trim="queryParams.orderGoodsSn" placeholder="请输入订单编号" />-->
			<!--			</el-form-item>-->
			<el-form-item label="收支类型:" prop="types">
				<el-cascader ref="consigneeOps" v-model="queryParams.types" :options="options" @change="cascader"></el-cascader>
			</el-form-item>
			<start-end-time ref="child" title="创建时间:" :get-time="getTime"></start-end-time>
		</el-form>
		<template slot="options">
			<l-search @search="query" @refresh="resetQuery" />
			<el-button type="primary" @click="handleExport">
				<svg-icon icon-class="export" size="16px"></svg-icon>
				导出
			</el-button>
		</template>
		<div slot="card" class="mb-[24px] flex items-center">
			<el-button type="primary" class="w-[150px] !h-[80px]">
				<div>{{ statistics.goodsPaymentIn }}</div>
				<div class="mt-[5px]">结算中货款当前余额</div>
			</el-button>
		</div>

		<el-table v-loading="loading" stripe :data="list">
			<el-table-column :formatter="emptyToString" type="index" label="序号" width="50" align="center"></el-table-column>
			<el-table-column :formatter="emptyToString" label="商家ID" align="center" prop="uuid" />
			<el-table-column :formatter="emptyToString" label="商家名称" align="center" prop="storeName" />
			<el-table-column :formatter="emptyToString" label="手机号码" align="center" prop="mobile" min-width="110" />
			<el-table-column :formatter="emptyToString" label="收支类型" align="center" prop="type">
				<template slot-scope="scope">
					<div>{{ scope.row.type === '1' ? '收入' : '支出' }}</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" label="业务类型" align="center" prop="businessType" />
			<el-table-column :formatter="emptyToNumber" align="center" label="变化前" min-width="120" prop="balanceBefore"> </el-table-column>
			<el-table-column :formatter="emptyToNumber" align="center" label="变化" min-width="120" prop="amount" />
			<el-table-column :formatter="emptyToNumber" align="center" label="变化后" min-width="120" prop="balance" />
			<!-- <el-table-column :formatter="emptyToString" label="备注" align="center" prop="remarks" style="min-width: 100px">
				<template slot-scope="scope">
					<div class="multi-line" style="min-width: 80px" v-text="scope.row.remarks || '-'"></div>
				</template>
			</el-table-column> -->
			<el-table-column :formatter="emptyToString" align="center" label="创建时间" min-width="200" prop="createTime">
				<template slot-scope="scope">
					<div class="w-full flex flex-col items-center">
						<span>{{ dayjs(scope.row.createTime).format('YYYY-MM-DD') }}</span>
						<span>{{ dayjs(scope.row.createTime).format('HH:mm:ss') }}</span>
					</div>
				</template>
			</el-table-column>
		</el-table>
	</l-page>
</template>

<script>
import { exportFinanceList2, getFinanceInfo, getFinanceStatistical, getGoodsPayment, getOrderInfo } from '@/api/mall/supplier';
import startEndTime from '@/components/StartEndTime';
import countTo from 'vue-count-to';
import tableMixins from '@/mixins/table';
import { getBalanceRecord } from '@/api/mall/topup';

export default {
	components: { countTo, startEndTime },
	mixins: [tableMixins],
	data() {
		return {
			details: {
				orderConfirm: 0,
				orderSub: 0,
				orderAdd: 0,
				totalSurplus: 0,
			},
			typeOptions: [
				{
					value: null,
					label: '全部',
				},
				{
					value: '销售',
					label: '销售',
				},
				{
					value: '核销',
					label: '核销',
				},
				{
					value: '取消订单',
					label: '取消订单',
				},
			],
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				name: null,
				mobile: null,
				operation: null,
				orderType: null,
				type: null,
				orderSn: '',
				date: [],
				uuid: null,
				storeName: null,
				businessType: null,
				balanceType: '店铺待结算货款',
				store: null,
				orderGoodsSn: null,
			},
			total: 0,
			loading: false,
			id: null,
			list: [],
			openDetails: false,
			orderDetails: {
				aftersaleInfo: {},
				goodsInfo: {},
				logisticsInfo: {},
				orderDetail: {},
				userInfo: {},
			},
			openWithdraw: false,
			info: {},
			options: [
				{
					value: '1',
					label: '收入',
					children: [{ value: '销售', label: '销售' }],
				},
				{
					value: '2',
					label: '支出',
					children: [
						{ value: '核销', label: '核销' },
						{ value: '取消订单', label: '取消订单' },
					],
				},
			],
			statistics: {
				overMoney: 0,
				overSupply: 0,
				orderTotal: 0,
				todayOverMoney: 0,
				waitPayMoney: 0,
				todayWaitPayMoney: 0,
				waitDeliverMoney: 0,
				todayWaitDeliverMoney: 0,
				waitReceiveMoney: 0,
				todayWaitReceiveMoney: 0,
				cancelMoney: 0,
				todayCancelMoney: 0,
				goodsPayment: 0,
				goodsPaymentIn: 0,
				withdrawMoney: 0,
			},
		};
	},
	created() {
		if (this.$route.query.id) {
			this.id = this.$route.query.id;
		}
		if (this.$route.query.name) {
			this.name = this.$route.query.name;
		}
		this.getList();
		this.getStatistical();
		this.getStatistics();
	},
	methods: {
		getStatistics() {
			this.$request.post('/mall/supplier-order/supplierGoodsPayment', {}).then((res) => {
				this.statistics = res.data;
			});
		},
		cascader(val) {
			if (Array.isArray(val)) {
				this.queryParams.businessType = val[val.length - 1];
				return;
			}
			this.queryParams.businessType = null;
		},
		handleClose() {
			this.openDetails = false;
			this.openWithdraw = false;
		},
		resetQuery() {
			this.$refs.child.resetTime();
			this.queryParams.types = null;
			this.queryParams.businessType = null;
			this.queryParams.balanceType = '店铺待结算货款';
			this.queryParams.uuid = null;
			this.queryParams.mobile = null;
			this.queryParams.beginTime = null;
			this.queryParams.endTime = null;
			this.queryParams.businessType = null;
			this.queryParams.storeName = null;

			this.resetForm('queryForm');
			this.query();
		},
		//获取时间
		getTime(startTime, endTime) {
			this.queryParams.beginTime = startTime;
			this.queryParams.endTime = endTime;
		},
		query() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		getStatistical() {
			this.$request.get('/charge/mall/pc/balanceStatistics?balanceType=5').then((res) => {
				this.details = res.data;
			});
		},
		showDetails(row) {
			if (row.businessType === '提现' || row.businessType === '提现失败退回') {
				//提现详情
				let obj = {
					userId: row.uuid,
					amount: row.amount,
				};
				getFinanceInfo(obj).then((response) => {
					this.id = row.id;
					this.info = response.data;
					this.openWithdraw = true;
				});
				return;
			}
			//订单详情
			let obj = {
				orderSn: row.source,
				goodsId: row.goodsId,
				normsId: row.normsId,
			};
			getOrderInfo(obj).then((response) => {
				this.orderDetails = response.data;
				if (response.data.logisticsInfo) {
					this.logisticsInfo = response.data.logisticsInfo.result;
				}
				this.openDetails = true;
			});
		},
		getList() {
			getBalanceRecord(this.queryParams).then((res) => {
				this.list = res.data.records;
				this.total = res.data.total;
			});
		},
		back() {
			this.$router.back();
		},
		handleSelectionChange() {},
		/** 导出按钮操作 */
		handleExport() {
			const queryParams = this.queryParams;
			this.$confirm('是否确认导出所有货款记录数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					return this.$request.post('/charge/mall/pc/export', queryParams);
				})
				.then((response) => {
					this.download(response.msg);
				});
		},
	},
};
</script>

<style lang="scss" scoped>
.withdraw {
	.content-info {
		.title {
			font-size: 16px;
			font-weight: 900;
			margin-bottom: 20px;
			padding-left: 30px;
		}

		.image__preview {
			display: flex;
			justify-content: center;

			.image {
				width: 329px;
				height: 162px;
				margin: 0 10px;
				display: block;
				border-radius: 8px;
			}
		}

		.btn-box {
			display: flex;
			justify-content: center;

			.btn {
				padding: 0;
				font-size: 18px;
				width: 236px;
				height: 60px;
				opacity: 1;
				border-radius: 4px;
				line-height: 60px;
			}
		}

		.info {
			display: flex;
			margin-bottom: 25px;

			> div {
				width: 50%;
				height: 40px;
				line-height: 40px;
				display: flex;
				color: #333333;
				justify-content: center;

				.label {
					width: 100px;
					font-size: 12px;
				}

				.text {
					width: 154px;
					background: #f7f7f7;
					font-size: 14px;
					box-sizing: border-box;
					padding-left: 12px;
					border: 1px solid #e5e5e5;
					opacity: 1;
					border-radius: 4px;
				}

				.img {
					background: #ffffff;
					border: none;
				}
			}
		}

		.info-img {
			height: 140px;

			.text {
				height: 140px;
				padding-left: 0px !important;
			}
		}

		.info-plus {
			> div {
				width: 100%;

				.text {
					width: 416px;
					//color: #F14A46;
				}
			}
		}
	}
}

.content {
	padding-bottom: 31px;
	color: #333333;

	.title {
		font-weight: bold;
		font-size: 14px;
	}

	.content-info {
		display: flex;
		padding: 11px 16px;
		border: 1px dashed #cccccc;
		border-radius: 10px;
		margin-top: 16px;

		.info2 {
			padding-left: 23px;
			position: relative;
		}

		.info {
			width: 33.33%;

			> div {
				//margin-top: 10px;
				padding: 5px 0;
			}
		}
	}
}

.container {
	padding: 20px 24px;

	.content {
		background: #ffffff;
		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.04);
		opacity: 1;
		border-radius: 0px;

		.title {
			//height: 87px;
			//display: flex;
			margin-bottom: 10px;

			.text {
				height: 36px;
				line-height: 36px;
				font-weight: 900;
				font-size: 18px;
				padding-right: 24px;
			}
		}
	}

	.header {
		height: 131px;
		background: #ffffff;
		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.04);
		opacity: 1;
		border-radius: 0px;
		display: flex;
		align-items: center;
		padding: 0 20px;

		.info-message {
			display: flex;

			.box1 {
				background: url('../../../assets/images/ic_6093.png') no-repeat;
				background-size: 100% 100%;
			}

			.box2 {
				background: url('../../../assets/images/ic_6095.png') no-repeat;
				background-size: 100% 100%;
			}

			.box {
				width: 208px;
				height: 91px;
				//background: #215ACD;
				opacity: 1;
				border-radius: 20px;
				color: #ffffff;
				text-align: center;
				overflow: hidden;
				margin-right: 24px;

				.num {
					font-size: 24px;
					font-weight: 300;
					margin-top: 17px;
				}

				.text {
					font-size: 12px;
					font-weight: bold;
					margin-top: 8px;
				}
			}
		}
	}

	.btn-return {
		width: 92px;
		height: 30px;
		background: #6373ee;
		opacity: 1;
		border-radius: 20px;
		display: flex;
		color: #ffffff;
		font-size: 14px;
		line-height: 30px;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.04);

		img {
			display: block;
			width: 15px;
			flex-shrink: 0;
			height: 14px;
			margin-right: 6px;
		}
	}
}
</style>
